<template>
	<el-menu class="el-menu-vertical-demo leftNav" @open="handleOpen" @close="handleClose">
		<el-submenu v-for="(model,index) in lists" :index="index+''" :key="index" :model="model">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span>{{model.menuOneLevel.menuName}}</span>
			</template>
			<el-menu-item-group>
				<el-menu-item v-for="(model2,index2) in model.menuTwoLevel" :index="index2+''" :key="index2" :model="model2">
					<router-link :to="model2.router">
						{{model2.menuName}}
					</router-link>
				</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
	</el-menu>
</template>

<script>
	let data = {
		"code": 0,
		"message": "获取成功",
		"result": [{
			"menuOneLevel": {
				"hasChildMenu": "1",
				"menuIconArrow": "",
				"menuIconNoSelected": "",
				"menuIconSelected": "",
				"menuName": "系统设置",
				"menuNo": "1",
				"menuUrl": "#"
			},
			"menuTwoLevel": [{
				"menuIconArrow": "",
				"menuName": "菜单管理",
				"menuNo": "1-17",
				"menuUrl": "/sysMenu/list",
				"router": "/menu"
			}, {
				"menuIconArrow": "",
				"menuName": "角色管理",
				"menuNo": "1-2",
				"menuUrl": "/sysRole/list",
				"router": "/role"
			}, {
				"menuIconArrow": "",
				"menuName": "用户管理",
				"menuNo": "1-3",
				"menuUrl": "/sysUser/list",
				"router": "/user"
			}]
		}, {
			"menuOneLevel": {
				"hasChildMenu": "1",
				"menuIconArrow": "",
				"menuIconNoSelected": "",
				"menuIconSelected": "",
				"menuName": "会员管理",
				"menuNo": "20",
				"menuUrl": "#"
			},
			"menuTwoLevel": [{
				"menuIconArrow": "",
				"menuName": "会员列表",
				"menuNo": "20-21",
				"menuUrl": "/member/list",
				"router": "/",
				"router": "/vip"
			}]
		}, {
			"menuOneLevel": {
				"hasChildMenu": "1",
				"menuIconArrow": "",
				"menuIconNoSelected": "",
				"menuIconSelected": "",
				"menuName": "产品管理",
				"menuNo": "23",
				"menuUrl": "#",
			},
			"menuTwoLevel": [{
				"menuIconArrow": "",
				"menuName": "首页广告",
				"menuNo": "23-25",
				"menuUrl": "/product/adList","router": "/banner"
			}, {
				"menuIconArrow": "",
				"menuName": "产品列表",
				"menuNo": "23-35",
				"menuUrl": "/product/list",
				"router": "/goods"
			}]
		}, {
			"menuOneLevel": {
				"hasChildMenu": "1",
				"menuIconArrow": "",
				"menuIconNoSelected": "",
				"menuIconSelected": "",
				"menuName": "订单管理",
				"menuNo": "27",
				"menuUrl": "#",
			},
			"menuTwoLevel": [{
				"menuIconArrow": "",
				"menuName": "订单列表",
				"menuNo": "27-28",
				"menuUrl": "/order/list/list",
				"router": "/order"
			}]
		}, {
			"menuOneLevel": {
				"hasChildMenu": "1",
				"menuIconArrow": "",
				"menuIconNoSelected": "",
				"menuIconSelected": "",
				"menuName": "财务管理",
				"menuNo": "31",
				"menuUrl": "#",
				"router": "/"
			},
			"menuTwoLevel": [{
				"menuIconArrow": "",
				"menuName": "退款申请",
				"menuNo": "31-32",
				"menuUrl": "/finance/refundList",
				"router": "/refund"
			}, {
				"menuIconArrow": "",
				"menuName": "提现申请",
				"menuNo": "31-33",
				"menuUrl": "/finance/cashList/list",
				"router": "/cash"
			}, {
				"menuIconArrow": "",
				"menuName": "分销设置",
				"menuNo": "31-34",
				"menuUrl": "/finance/costList",
				"router": "/distribution"
			}]
		}]
	};
	let dataNav = data.result;

	console.info('dataNav', dataNav);

	export default {
		data() {
			return {
				lists: dataNav
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style>
	.leftNav {
		background: #545c64;
		height: 100vh;
	}
	
	.el-submenu__title,
	.el-menu-item {
		color: #fff;
	}
	
	.el-submenu__title,
	.el-menu-item {
		text-align: left;
	}
	
	.el-menu--inline {
		background: #7f858b;
	}
	
	.el-menu-item-group__title {
		display: none;
	}
	
	.el-submenu__title:hover,
	.el-menu-item:focus,
	.el-menu-item:hover {
		background: #80adde;
	}
	
	.el-aside {
		width: auto !important;
	}
	
	.el-header {
		height: auto !important;
	}
	.el-menu-item>a {
		color: inherit;
    	display: block;
	}
</style>